<template>
  <div class="container-fluid">
    <!-- 顶部导航栏 -->
    <header class="col-md-12 bg-primary text-white p-3">
      <div class="d-flex align-items-center w-100">
        <div>
          <h1>停车场管理系统</h1>
        </div>
        <div class="d-flex items-center" style="margin-left: auto;">
          <span class="mr-4">{{ username }}</span>
          <router-link to="/" class="btn btn-light mr-2">返回首页</router-link>
          <button @click="logout" class="btn btn-light">退出</button>
        </div>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="col-md-12 mt-4">
      <div class="card">
        <div class="card-header bg-secondary text-white">
          <div class="row justify-content-between align-items-center">
            <div class="col-md-6">
              <h2>添加用户</h2>
            </div>
            <div class="col-md-6 text-right">
              <router-link to="/system/user/manage" class="btn btn-primary">返回列表</router-link>
              <router-link to="/" class="btn btn-light ml-2">返回首页</router-link>
            </div>
          </div>
        </div>
        <div class="card-body">
          <form @submit.prevent="handleSubmit">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="username">用户名 <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="username" v-model="formData.username" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                  <label for="password">密码 <span class="text-danger">*</span></label>
                  <input type="password" class="form-control" id="password" v-model="formData.password" placeholder="请输入密码">
                </div>
                <div class="form-group">
                  <label for="confirmPassword">确认密码 <span class="text-danger">*</span></label>
                  <input type="password" class="form-control" id="confirmPassword" v-model="formData.confirmPassword" placeholder="请再次输入密码">
                </div>
                <div class="form-group">
                  <label for="realName">真实姓名 <span class="text-danger">*</span></label>
                  <input type="text" class="form-control" id="realName" v-model="formData.realName" placeholder="请输入真实姓名">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="roleId">角色 <span class="text-danger">*</span></label>
                  <select class="form-control" id="roleId" v-model="formData.roleId">
                    <option value="">请选择角色</option>
                    <option v-for="role in roles" :key="role.id" :value="role.id">{{ role.name }}</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="phone">联系电话</label>
                  <input type="tel" class="form-control" id="phone" v-model="formData.phone" placeholder="请输入联系电话">
                </div>
                <div class="form-group">
                  <label for="email">邮箱</label>
                  <input type="email" class="form-control" id="email" v-model="formData.email" placeholder="请输入邮箱">
                </div>
                <div class="form-group">
                  <label for="status">状态 <span class="text-danger">*</span></label>
                  <select class="form-control" id="status" v-model="formData.status">
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="row mt-4">
              <div class="col-md-12 text-center">
                <button type="submit" class="btn btn-primary btn-lg" :disabled="loading">保存</button>
                <button type="reset" class="btn btn-secondary btn-lg ml-3" @click="handleReset">重置</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import axios from '../../utils/axios';

export default {
  name: 'AddUserView',
  data() {
    return {
      username: '',
      formData: {
        username: '',
        password: '',
        confirmPassword: '',
        realName: '',
        roleId: '',
        phone: '',
        email: '',
        status: '1'
      },
      roles: [
        { id: 1, name: '超级管理员' },
        { id: 2, name: '普通操作员' },
        { id: 3, name: '财务人员' },
        { id: 4, name: '普通用户' }
      ],
      loading: false
    };
  },
  mounted() {
    this.username = localStorage.getItem('username') || '管理员';
    this.loadRoles();
  },
  methods: {
    logout() {
      localStorage.removeItem('isLoggedIn');
      localStorage.removeItem('username');
      this.$router.push('/login');
    },
    async loadRoles() {
      try {
        // 尝试从后端加载角色数据
        const response = await axios.get('/roles');
        if (response && Array.isArray(response)) {
          this.roles = response;
        }
      } catch (error) {
        console.error('加载角色列表失败:', error);
        // 使用默认角色数据
      }
    },
    validateForm() {
      // 简单的表单验证
      if (!this.formData.username) {
        alert('请输入用户名');
        return false;
      }
      if (!this.formData.password) {
        alert('请输入密码');
        return false;
      }
      if (this.formData.password !== this.formData.confirmPassword) {
        alert('两次输入的密码不一致');
        return false;
      }
      if (!this.formData.realName) {
        alert('请输入真实姓名');
        return false;
      }
      if (!this.formData.roleId) {
        alert('请选择角色');
        return false;
      }
      return true;
    },
    async handleSubmit() {
      if (!this.validateForm()) {
        return;
      }

      this.loading = true;
      // 准备提交的数据（排除确认密码，包含其他七个属性）
      const submitData = {
        username: this.formData.username,
        password: this.formData.password,
        name: this.formData.realName, // 前端表单中是realName，后端实体类中是name
        roleId: parseInt(this.formData.roleId),
        phone: this.formData.phone,
        email: this.formData.email,
        status: parseInt(this.formData.status)
      };
      
      try {
        // 发送请求到后端正确的API路径（注意：axios已配置baseURL为/api）
        const response = await axios.post('/users/add', submitData);
        console.log('添加用户成功:', response);
        alert('用户添加成功');
        
        // 如果有临时保存的用户数据，清除它
        this.clearOfflineUserData();
        
        this.$router.push('/system/user/manage');
      } catch (error) {
        // 详细的错误日志输出
        console.group('添加用户失败详情');
        console.log('错误对象:', error);
        console.log('提交的数据:', submitData);
        console.log('请求URL:', '/users/add');
        
        // 根据错误类型提供更具体的错误信息
        let errorMessage = '未知错误，请重试';
        let errorDetails = '';
        
        if (error.response) {
          // 服务器返回了错误状态码
          errorMessage = `服务器错误: ${error.response.status} ${error.response.statusText}`;
          // 格式化错误详情，避免显示[object Object]
          errorDetails = typeof error.response.data === 'object' 
            ? JSON.stringify(error.response.data) 
            : (error.response.data || '无详细信息');
          console.log('错误响应数据:', errorDetails);
        } else if (error.request) {
          // 请求已发送但未收到响应
          errorMessage = '网络错误: 无法连接到服务器';
          
          if (error.message && error.message.includes('ECONNREFUSED')) {
            // 特定处理连接被拒绝的情况
            errorDetails = '无法连接到后端服务，请检查：\n1. 端口2509的Maven服务是否已启动\n2. 后端API是否正确部署\n3. 网络连接是否正常';
            
            // 添加离线模式：临时保存用户数据到localStorage
            this.saveOfflineUserData(submitData);
            errorMessage += '，已启用离线保存';
          }
        } else if (error.message) {
          // 请求配置出错
          errorMessage = error.message;
        }
        
        console.log(errorDetails);
        console.groupEnd();
        
        // 显示友好的错误提示
        alert(`添加用户失败：${errorMessage}\n\n${errorDetails}`);
      } finally {
        this.loading = false;
      }
    },
    
    // 保存用户数据到本地存储（离线模式）
    saveOfflineUserData(userData) {
      try {
        // 添加时间戳以便后续识别
        const offlineData = {
          ...userData,
          savedAt: new Date().toISOString()
        };
        
        // 获取已有的离线数据或创建新数组
        const offlineUsers = JSON.parse(localStorage.getItem('offlineUsers')) || [];
        offlineUsers.push(offlineData);
        
        // 保存到localStorage
        localStorage.setItem('offlineUsers', JSON.stringify(offlineUsers));
        console.log('用户数据已临时保存到本地，共', offlineUsers.length, '条待同步数据');
      } catch (storageError) {
        console.error('保存离线用户数据失败:', storageError);
      }
    },
    
    // 清除本地存储中的用户数据
    clearOfflineUserData() {
      try {
        localStorage.removeItem('offlineUsers');
        console.log('已清除临时保存的用户数据');
      } catch (storageError) {
        console.error('清除离线用户数据失败:', storageError);
      }
    },
    
    handleReset() {
      this.formData = {
        username: '',
        password: '',
        confirmPassword: '',
        realName: '',
        roleId: '',
        phone: '',
        email: '',
        status: '1'
      };
    }
  }
};
</script>

<style>
/* 组件特定样式 */
</style>